<template>
  <div>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" >
       <div class="smallrun" v-show="ballfleg" ref="smallrun"></div> 
    </transition>
   
    <div class="mui-card">
      <div class="mui-card-content">
        <!-- <div class="mui-card-content-inner">这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等</div> -->
        <comt :Lunbo="Lunbo" :isfull="false"></comt>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">{{ newshuju.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div>
            <span>销售价 {{ newshuju.sell_price }}</span>
            <s>市场价 {{ newshuju.market_price }}</s>
          </div>
          <div>
            <div>购买数量</div><methmui @shopings="cheng" :kucun="newshuju.stock_quantity"></methmui>
          </div>
          <div>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
          </div>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p style="color: #333;">
              <div>商品货号:{{ newshuju.goods_no }}</div>
              <div>库存情况:{{ newshuju.stock_quantity }}</div>
              <div>上架时间:{{ newshuju.add_time | deteFoemat }}</div>
          </p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button size="large" plain @click="phoot(id)">图文介绍</mt-button>
        <mt-button size="large" plain @click="pinlun(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import comt from "../subcoment/swiper.vue";
import methmui from "../muichajian/muiInfo.vue"
export default {
  data() {
    return {
      id: this.$route.params.id,
      Lunbo: [],
      newshuju: [],
      counent: 1,
      ballfleg: false 
    };
  },
  created() {
    this.getInfo();
    this.getshuju()
  },
  methods: {
    getInfo() {
      fetch("http://www.liulongbin.top:3005/api/getthumimages/" + this.id)
        .then(reponse => {
          return reponse.json();
        })
        .then(res => {
          console.log(res.message);
          res.message.forEach(item => {
            item.img = item.src;
          });
          this.Lunbo = res.message;
        });
    },
    getshuju(){
        this.axios.get("/api/goods/getinfo/"+this.id).then(res=>{
            console.log(res.data.message);
            this.newshuju=res.data.message[0]
        })
    },
    phoot(id){
      this.$router.push({path: "/Home/goodsphot/"+id})
    },
    pinlun(id){
      this.$router.push({path: "/Home/goodsing/"+id})
    },
    cheng(cont){
      this.counent=cont
    },
    addToShopCar(){
      this.ballfleg=!this.ballfleg
      var goodsInfo={
        id:this.id,
        count: this.counent,
        price: this.newshuju.sell_price,
        selected:true
      }
      this.$store.commit("addInfo",goodsInfo)
    },
    beforeEnter(el){
    el.style.transform="translate(0,0)"
  },
  enter(el,done){
    el.offsetWidth;
    //先获取小球的位置
    var ballTransition=this.$refs.smallrun.getBoundingClientRect()
    //底部坐标终点
    var newsBoll=document.getElementById("newsball").getBoundingClientRect()
    //
    const newX=newsBoll.left-ballTransition.left
    const newY=newsBoll.top-ballTransition.top
    
    el.style.transform=`translate(${newX}px,${newY}px)`
     el.style.transition="all 1s ease"
     done()
  },
  afterEnter(el){
    this.ballfleg=!this.ballfleg
  }
  },
  components: {
    comt,
    methmui
  },
};
</script>
<style lang="less" scoped>
.smallrun{
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  left: 78px;
  top: 369px;
  z-index: 9999;
}
</style>